<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爱心</title>
</head>
<style>
body{
	background-color: #000;
    }
    
      
#main #heart {
	border-radius:10px;
	margin-top: 50px;
	width: 15px;
	height: 20px;
	background-color: #09C;
	margin-right: 5px;
	margin-left: 5px; 
	animation:action 2s infinite alternate;  
}
@keyframes action{
	from{
		scale:0;
}
to{scale:1;
}
}
#main {
        display:flex;
        justify-content: center;
        align-items: center;
}
</style>

<body>
<div id="main">
  <div id="heart" style="height:30px; background-color:#F6C;"></div>
  <div id="heart" style="height:60px; background-color:#0C0;"></div>
  <div id="heart" style="height:90px; background-color:#936;"></div>
  <div id="heart" style="height:100px; background-color:#639; transform:translateY(15px);"></div>
  <div id="heart" style="height:110px; background-color:#F00; transform:translateY(30px);"></div>
  <div id="heart" style="height:100px; background-color:#C66; transform:translateY(15px);"></div>
  <div id="heart" style="height:90px; background-color:#F00;"></div>
  <div id="heart" style="height:60px; background-color:#F0C;"></div>
  <div id="heart" style="height:30px; background-color:#CFC;"></div>
  
  
</div>
</body>
</html>
